<template>
  <div class="procure-editor-dialog">
    <el-drawer v-model="visible" width="500" align-center center :show-close="false" @close="handelbeforeClose">
      <template #header>
        <div class="head_title">
          <p>
            {{ title }}
            <span class="f12" style="color: #86909c">（提交后需要等采购确认后生效）</span>
          </p>
          <el-icon size="20" @click="handelbeforeClose"><CloseBold /></el-icon>
        </div>
      </template>

      <div class="content-wrap">
        <div class="remark">
          <div class="refuse-remark-info" v-html="remark"></div>
        </div>
        <template v-if="status == 2">
          <div class="label-text">历史记录</div>
          <!-- 拒绝原因 -->
          <div class="refuse-wrap">
            <div class="refuse-remark-info" v-html="remark"></div>
            <div class="refuse">
              <div class="refuse-text">拒绝原因：{{ refuseReason }}</div>
              <div class="refuse-remark-info" v-html="refuseRemark"></div>
            </div>
          </div>
          <!-- 备注信息 -->
          <!-- <div class="label-text">备注描述</div> -->
          <!-- <Editor v-model="textarea" /> -->
        </template>
      </div>

      <template #footer v-if="status == 0">
        <div class="dialog-footer">
          <el-button class="jzt-button" type="info" @click="refuse" style="width: 120px">{{ cancelBtnText }}</el-button>
          <el-button type="primary" @click="submit" style="width: 120px">{{ submitBtnText }}</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import Editor from "@/components/Editor";

const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  // 抽屉title
  title: {
    type: String,
    default: "发货确认"
  },
  // 状态;0 工厂发起 1：商家通过 2：商家拒绝
  status: {
    type: Number,
    default: 0
  },
  // 工厂提交的备注
  remark: {
    type: String,
    default: ""
  },
  //拒绝原因 富文本编辑器的内容
  refuseReason: {
    type: String,
    default: ""
  },
  //拒绝备注
  refuseRemark: {
    type: String,
    default: ""
  },
  submitBtnText: {
    type: String,
    default: ""
  },
  cancelBtnText: {
    type: String,
    default: ""
  },

  message: {
    type: String,
    default: "---"
  },
  editorVal: {
    type: String,
    default: "" //富文本编辑器的内容
  }
});
const textarea = ref(props.editorVal);
// const editorDisabled = ref(false)
const emit = defineEmits(["update:isOpen", "submit", "refuse", "close"]);
const visible = computed({
  get() {
    return props.isOpen;
  },
  set(value) {
    emit("update:isOpen", value);
  }
});

const submit = () => {
  emit("submit");
};

const refuse = () => {
  emit("refuse");
};

const handelbeforeClose = () => {
  emit("close");
};
</script>

<style scoped lang="scss">
.procure-editor-dialog {
  ::v-deep(.el-drawer) {
    box-shadow: -8px 0px 16px 0px rgba(0, 38, 73, 0.1);
    border-radius: 10px 0px 0px 10px;
    .el-drawer__header {
      margin: 0;
      padding-bottom: 24px;
      border-bottom: 1px solid #dcdfe6;
    }
  }
  .head_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      font-size: 18px;
      color: #131414;
      position: relative;
      margin-left: 14px;
    }
    p::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      background: #007dff;
      margin-right: 10px;
      border-radius: 50%;
      position: absolute;
      left: -20px;
      top: 6px;
    }
    i {
      cursor: pointer;
    }
  }
  .content-wrap {
    .remark {
      padding: 16px;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #dcdfe6;
    }
    .remark-text {
      font-size: 14px;
      color: #3d3d3d;
      line-height: 22px;
    }
    .img-box {
      display: flex;
      flex-direction: row;
      img {
        width: 69px;
        height: 64px;
        margin-top: 20px;
        margin-right: 10px;
        border-radius: 4px;
      }
    }
    .label-text {
      font-size: 14px;
      color: #86909c;
      margin-top: 16px;
      margin-bottom: 10px;
    }
    .refuse-wrap {
      background: #f6f8fa;
      border-radius: 4px;
      padding: 20px;
      padding-bottom: 15px;
      margin-bottom: 20px;

      .refuse {
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #e1e6ed;
        padding: 12px;
        margin-top: 17px;
        .refuse-text {
          color: #ff3333;
          font-size: 14px;
          margin-bottom: 10px;
        }
      }
    }
    :deep(.refuse-remark-info) {
      max-height: 300px;
      overflow-y: scroll;
      img {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        margin: 10px 10px 0 0;
      }
      video {
        width: 130px;
        height: 80px;
      }
    }
  }

  .dialog-footer {
    text-align: center;
  }
}
</style>
